<template>
	<view class="container user-login yuan-form">
		<image class="login-bg" :src="$fileUrl+'user-bg.png'" mode="widthFix"></image>
		<view class="login-main">
			<image class="top-logo" :src="$fileUrl+'logo.png'" mode="widthFix"></image>
			<view class="top-title">中医药成果转化集散地</view>
			<view class="login-panel">
				<view>
					<text class="page-type" :class="pageType===1&&'type-active'" @click="pageType=1">登录</text>
					<text class="page-type" :class="pageType===2&&'type-active'" @click="pageType=2">注册</text>
				</view>
				<view class="login-form">
					<template v-if="pageType===1">
						<view class="setting-list yuan-form-list">
							<view class="yuan-form-label yuan-label-must">用户名:</view>
							<input class="yuan-input" v-model="loginData.name" placeholder="请输入用户名"
								placeholder-class="placeholder-style">
						</view>
						<view class="setting-list yuan-form-list">
							<view class="yuan-form-label yuan-label-must">密码:</view>
							<input class="yuan-input" v-model="loginData.password" type="password" placeholder="请输入密码"
								placeholder-class="placeholder-style">
						</view>
						<view class="file-tips" @click="lookFile">
							<checkbox style="transform:scale(0.8)" :checked="lookFileType" />
							<text>我已阅读并同意</text>
							<text class="c-primary" @click.stop="jumpService">《用户服务协议与隐私政策》</text>
						</view>
						<!-- <view class="setting-list yuan-form-list">
							<view class="yuan-form-label yuan-label-must">验证码:</view>
							<image class="top-logo" :src="captcha" mode="widthFix" @click="getCode"></image>
							<input class="yuan-input" v-model="loginData.code" placeholder="请输入验证码"
								placeholder-class="placeholder-style">
						</view> -->
					</template>
					<template v-else>
						<view class="setting-list yuan-form-list">
							<view class="yuan-form-label yuan-label-must">选择角色权限:</view>
							<picker class="setting-picker yuan-input" mode="selector" :range="roleNameArr"
								@change="roleNameArrChange">
								<view class="rent-picker">
									<view class="picker-input" v-if="registerData.roleName">
										{{registerData.roleName}}
									</view>
									<view class="picker-input placeholder-style" v-else>请选择角色权限</view>
								</view>

							</picker>
							<view class="list-ico iconfont">&#xe775;</view>
						</view>
						<view class="setting-list yuan-form-list">
							<view class="yuan-form-label yuan-label-must">选择角色身份:</view>
							<picker class="setting-picker yuan-input" mode="selector" :range="userTypeArr"
								@change="userTypeArrChange">
								<view class="rent-picker">
									<view class="picker-input" v-if="registerData.userType">
										{{registerData.userType}}
									</view>
									<view class="picker-input placeholder-style" v-else>选择角色身份</view>
								</view>

							</picker>
							<view class="list-ico iconfont">&#xe775;</view>
						</view>
					</template>
					<view class="bottom-btn-box">
						<view class="yuan-btn btn-primary bottom-btn" @click="clickLogin" v-if="pageType===1">登录</view>
						<view class="yuan-btn btn-primary bottom-btn" v-else @click="jumpRegister">注册</view>
					</view>
				</view>


			</view>

		</view>

	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted } from "vue";
	import api from "../../common/api";
	import { hideLoading, setStorage, showLoading, showToast } from "../../common/util";
	import commonStore from "../../store/commonStore";
	import userStore from "../../store/userStore";
	const pageType = ref(1)
	const captcha = ref('')
	const loginData = reactive<any>({})
	const registerData = reactive<any>({})

	onMounted(async () => {

	})
	const roleNameArr = reactive(['需求方', '成果方', '需求/成果方'])
	const roleNameArrChange = (e : any) => {
		registerData.roleName = roleNameArr[e.detail.value]
	}
	const userTypeArr = reactive(['个人', '企业/单位', '专家', '专家团队'])
	const userTypeArrChange = (e : any) => {
		registerData.userType = userTypeArr[e.detail.value]
	}
	const jumpRegister = () => {
		if (!registerData.roleName) {
			showToast('请选择角色权限')
			return
		}
		if (!registerData.userType) {
			showToast('请选择角色身份')
			return
		}
		commonStore.commit('addRegister', registerData)
		uni.navigateTo({ url: '/pages/user/register' })
	}

	const lookFileType = ref(false)
	const lookFile = () => {
		lookFileType.value = !lookFileType.value
	}
	const clickLogin = async () => {
		if (!lookFileType.value) {
			showToast('请同意用户协议和隐私政策')
			return
		}
		if (!loginData.name) {
			showToast('请输入用户名')
			return
		}
		if (!loginData.password) {
			showToast('请输入密码')
			return
		}

		showLoading()
		wx.login({
			success: async (res) => {
				if (res.code) {
					try {
						const loginRes = await api.passwordLogin({
							...loginData,
							type: 'WX',
							wxCode: res.code
						})
						showToast('登录成功', {}, () => {
							doLogin(loginRes.data)
						})
					} finally {
						hideLoading()
					}
				} else {
					console.log('登录失败！' + res.errMsg)
				}
			}
		})



	}
	const doLogin = async (res : any) => {
		//获取用户信息
		setStorage("userAuth", { userToken: res.token });
		showLoading()
		try {
			await userStore.dispatch('getUserInfo')
			commonStore.commit('reloadAll')
			uni.navigateBack()
		} finally {
			hideLoading()
		}
	}
	const jumpService = () => {
		uni.navigateTo({ url: '/pages/public/service' })
	}
</script>

<style lang="scss">
	.user-login {
		height: 100%;
		position: relative;

		.login-bg {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.login-main {
			position: relative;
			z-index: 2;
			padding: 0 20rpx;
		}

		.top-logo {
			width: 150rpx;
			height: 150rpx;
			display: block;
			margin: 0 auto;
			margin-top: 90rpx;
		}

		.top-title {
			font-size: 51rpx;
			color: #0C0F10;
			text-align: center;
			margin-top: 40rpx;
		}


		.bottom-btn-box {
			margin-top: 50px;
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-bottom: 30rpx;
		}

		.login-panel {
			width: 690rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			background-color: #fff;

			margin-top: 130rpx;
			box-shadow: 0px 8rpx 10rpx 0px rgba(0, 0, 0, 0.08);
		}

		.login-form {
			padding: 0 30rpx 30rpx 30rpx;
		}

		.page-type {
			height: 100rpx;
			display: inline-block;
			line-height: 100rpx;
			width: 50%;
			text-align: center;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			position: relative;
			z-index: 1;
			color: #82848A;
		}

		.type-active {
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.08);
			z-index: 2;
			color: #181E25;
		}

		.list-ico {
			color: #868686;
			font-size: 26rpx;
		}

		.file-tips {
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}
</style>